<template>
  <div class="enha_bg" :style="{backgroundImage:item.bg}" v-if="isShow">
    <div class="enha" :class="detail.id" v-for="detail  in item.details">
      <div class="enha_icon"
           :style="{backgroundImage:item.bg}"
           :class="[{'grayscale':detail.need>skillCount},'enhan_iocn_bg']"
           @click.right.prevent="rightup(detail)"
           @click="click(detail)">
      </div>
      <div class="enha_title" :class="{'grayscale':detail.need>skillCount,'endfont':detail.now===detail.ranks}"><span v-text="detail.now"></span>/<span v-text="detail.ranks"></span></div>
      <div class="enha_des">
        <!--鼠标指向时,弹出浮动提示-->
        <div class="enha_info" v-for="(des,index) in detail.descriptions" v-show="index>=(detail.now-1)">
          <div :class="['title',
          {'destiny_title':detail.tips.search(/天命披风/i)!==-1},
          {'strike_title':detail.tips.search(/传奇打击/i)!==-1},
          {'moment_title':detail.tips.search(/传奇时刻/i)!==-1}
          ]">名称:{{ detail.title }} <span
              v-if="detail.descriptions.length>1">{{ index + 1 }}</span></div>
          <el-row class="des" type="flex" justify="space-between">
            <el-col :span="12">类型:{{ detail.type }}</el-col>
            <el-col :span="10">AP:{{ detail.cost }}</el-col>
          </el-row>
          <el-row class="des" type="flex" justify="space-between">
            <el-col :span="12" v-show="des.cd" v-if="des.cd>0">CD:{{ des.cd }}秒</el-col>
            <el-col :span="10" v-show="des.cost_sp" v-if="des.cost_sp>0"> 消耗:{{ des.cost_sp }}</el-col>
          </el-row>
          <div class="txt" v-html="des.txt"></div>
          <div class="tips" v-text="detail.tips"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="enha_foot" v-if="isShow">
    <el-badge :value="skillCount" class="item">
      <el-button type="danger" size="small" @click="rest" round>重置</el-button>
    </el-badge>
  </div>
</template>
<script>
import {ElButton, ElOption, ElSelect, ElTabPane, ElTabs, ElRow, ElCol, ElBadge} from "element-plus";
import dataUtilities from "../data";

export default {
  components: {ElButton, ElTabPane, ElTabs, ElSelect, ElOption, ElRow, ElCol, ElBadge},
  props: {
    data: Object
  },
  data() {
    return {
      skillCount: 0,
      isShow: false,
      item: {bg: '', icon: '', details: [{id: '', tier: 1, title: '', type: '', cost: 1, need: 0, now: 0, ranks: 1, tips: '', descriptions: [{cost_sp: 20, cd: 60, txt: ''}]}]}
    }
  },
  methods: {
    click(detail) {
      //当前置不满足时不允许加点
      if (detail.parent) {
        let parent = this.item.details.find(o => o.id === detail.parent);
        if (parent && detail.now >= parent.now) return;
      }
      //当总点数不满足时不允许加点
      if (detail.need > this.skillCount) return;
      //当前层数显示
      if (detail.now < detail.ranks) {
        detail.now++;
        //当前总点数计数
        this.skillCount += detail.cost;
      }
    },
    rightup(detail) {
      //当前项未曾加过点则不进行判定
      if (detail.now === 0) return;
      //当子项已经加点时不允许减少
      let son = this.item.details.find(o => o.parent === detail.id);
      if (son && son.now >= detail.now) return;
      //求出最大已加层
      let maxTier = 0;
      let maxNeed = 0;
      for (let i = 0; i < this.item.details.length; i++) {
        let item = this.item.details[i];
        if (item.now > 0 && item.tier > maxTier) {
          maxTier = item.tier;
          maxNeed = item.need;
        }
      }
      //如果不是最顶层，进行需求鉴定
      if (maxTier > detail.tier) {
        for (let i = maxTier; i > detail.tier; i--) {
          //当前项以下的层里， 已加点
          let lowSum = 0;
          for (let l = 0; l < this.item.details.length; l++) {
            let item = this.item.details[l];
            if (item.tier < i && item.now !== 0) {
              lowSum += item.now * item.cost;
            }
          }
          if (maxNeed > lowSum - detail.cost) return;
        }
      }
      //补丁 当有其他项选择时，C1 不可取消
      if (detail.id === "c1" && this.skillCount > 1) return;
      //else 如果当前项是最顶层,直接减少
      if (detail.now > 0) {
        detail.now--;
        //当前总点数计数
        this.skillCount -= detail.cost;
      }
    },
    rest() {
      this.item = dataUtilities.utilities.deepCopy(this.data)
      this.skillCount = 0;
    }
  },
  created() {
    this.$watch('data', (newVal, oldVal) => {
      this.isShow = newVal && newVal.details && newVal.details.length > 1;
      if (this.isShow) this.rest();
    })
  }
}
</script>
<style lang="scss">
.view {
  width: 300px;
  float: left;
  margin-right: 10px;
}

.enha_bg {
  width: 291px;
  height: 415px;
  position: relative;
  background-repeat: no-repeat;
}

.enha_foot {
  position: relative;
  text-align: right;
}

.el-tabs__content {
  overflow: visible !important;
}

.el-card {
  overflow: visible !important;
}

.enha {
  position: absolute;
  width: 33px;
  height: 46px;

  & .enha_title {
    width: 33px;
    text-align: center;
    font-weight: bold;
    font-size: 12px;
    margin-top: 3px;
    color: #00ff00;
    background-color: #000000;
  }

  & .grayscale {
    filter: grayscale(100%);
  }

  & .endfont {
    color: #094f09;
  }

  & .enha_icon {
    width: 33px;
    height: 33px;
    border-radius: 3px;
    background-repeat: no-repeat;
    cursor: pointer;
  }

  & .enha_des {
    position: relative;
    visibility: hidden;
    width: 550px;
    z-index: 9999;

    & .enha_info {
      filter: alpha(Opacity=90);
      -moz-opacity: 0.9;
      opacity: 0.9;
      background-color: #434343;

      border-radius: 8px;
      padding: 5px;
      display: inline;
      float: left;
      width: 250px;
      margin-right: 5px;
      margin-bottom: 5px;
      text-align: left;

      & .title {
        font-weight: bold;
        color: #efa91d;
        font-size: small;
      }

      & .des {
        color: #0edec6;
        font-size: small;
      }

      & .txt {
        color: #c3d713;
        font-size: small;
      }

      & .tips {
        color: #e7781c;
        font-size: small;
      }
    }
  }

  & .enha_icon:hover ~ .enha_des {
    visibility: visible;
  }

}

.destiny_title {
  color: purple !important;
  background-color: #f5e8c3 !important;
  font-weight: bold;
}

.strike_title {
  color: #026902 !important;
  background-color: #f5e8c3 !important;
  font-weight: bold;
}

.moment_title {
  color: #04aed3 !important;
  background-color: #f5e8c3 !important;
  font-weight: bold;
}

$y_off: 71;
$x_off: 59;
@mixin enha_icon($ym,$xm) {
  top: $y_off*$ym+12px;
  left: $x_off*$xm+13px;
  & .enhan_iocn_bg {
    background-position-y: -($y_off*$ym+12px);
    background-position-x: -($x_off*$xm+13px);
  }
}

@for $y from 0 through 4 {
  .t#{abs($y - 5)}a {
    @include enha_icon($y, 0);
  }
  .t#{abs($y - 5)}b {
    @include enha_icon($y, 1);
  }
  .t#{abs($y - 5)}c {
    @include enha_icon($y, 2);
  }
  .t#{abs($y - 5)}d {
    @include enha_icon($y, 3);
  }
  .t#{abs($y - 5)}e {
    @include enha_icon($y, 4);
  }
}

$c_off: 46.5;
@for $c from 0 through 5 {
  .c#{$c + 1} {
    top: 360px;
    left: $c_off*$c+ 13px;

    & .enhan_iocn_bg {
      background-position-x: -($c_off*$c+13px);
      background-position-y: -360px;
    }
  }
}
</style>